<template>
<div class="page panel">
  <div class="hd">
    <h1 class="page_title">Panel</h1>
  </div>
  <div class="bd">
    <panel :access="true">
      <panel-header>图文组合列表</panel-header>
      <panel-body>
        <media-box type="appmsg" link="javascript:;">
          <media-header>
            <h1>H1</h1>
          </media-header>
          <media-body>
            <media-title>标题一</media-title>
            <media-description>由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</media-description>
          </media-body>
        </media-box>
        <media-box type="appmsg" link="javascript:;">
          <media-header>
            <media-appmsg-thumb src=""></media-appmsg-thumb>
          </media-header>
          <media-body>
            <media-title>标题二</media-title>
            <media-description>由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</media-description>
          </media-body>
        </media-box>
      </panel-body>
      <panel-footer link="javascript:;">查看更多</panel-footer>
    </panel>
    <panel access>
      <panel-header>文字组合列表</panel-header>
      <panel-body>
        <media-box type="text">
          <media-body>
            <media-title>标题一</media-title>
            <media-description>
              由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。
            </media-description>
          </media-body>
        </media-box>
        <media-box type="text">
          <media-body>
            <media-title>标题二</media-title>
            <media-description>
              由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。
            </media-description>
          </media-body>
        </media-box>
      </panel-body>
      <panel-footer>查看更多</panel-footer>
    </panel>
    <panel>
      <panel-header>小图文组合列表</panel-header>
      <panel-body>
        <media-box type="small_appmsg">
          <media-body>
            <cells type="access">
              <link-cell link="javascript:;">
                <img slot="header" src="" style="width:20px;margin-right:5px;display:block">
                <p slot="body">文字标题</p>
                <span slot="footer"></span>
              </link-cell>
              <link-cell link="javascript:;">
                <img slot="header" src="" style="width:20px;margin-right:5px;display:block">
                <p slot="body">文字标题</p>
                <span slot="footer"></span>
              </link-cell>
            </cells>
          </media-body>
        </media-box>
      </panel-body>
    </panel>
    <panel>
      <panel-header>文字列表附来源</panel-header>
      <panel-body>
        <media-box type="text">
          <media-body>
            <media-title>标题一</media-title>
            <media-description>由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</media-description>
            <media-info>
              <media-info-meta>文字来源</media-info-meta>
              <media-info-meta>时间</media-info-meta>
              <media-info-meta extra>其他信息</media-info-meta>
            </media-info>
          </media-body>
        </media-box>
      </panel-body>
    </panel>
  </div>
</div>
</template>

<script>
import {
  Panel, PanelHeader, PanelBody, PanelFooter,
  MediaBox, MediaHeader, MediaBody,
  MediaAppmsgThumb, MediaTitle, MediaDescription,
  MediaInfo, MediaInfoMeta,
  Cells, LinkCell
} from 'vue-weui';

export default {
  components: {
    Panel, PanelHeader, PanelBody, PanelFooter,
    MediaBox, MediaHeader, MediaBody,
    MediaAppmsgThumb, MediaTitle, MediaDescription,
    MediaInfo, MediaInfoMeta,
    Cells, LinkCell
  }
}

</script>
